<template>
  <div class="warehoust-con table-gl-w">
    <div class="search-con search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
    </div>

    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft>
          <a-button type="primary" size="medium">导出</a-button>
        </template>
        <template #tableBody>
          <a-table size="mini" class="table-singe-line" v-model:selectedKeys="rowSelectList" @selection-change="selectColumn" row-key="id" :loading="loading" @sorter-change="sortChange" :summary="summary" :row-selection="rowSelection" :columns="columns" :data="tableList" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
            <template #columns>
              <a-table-column title="序号" width="60">
                <template #cell="{ record, rowIndex }">
                  {{ rowIndex + 1 }}
                </template>
              </a-table-column>
              <a-table-column title="仓库名称" data-index="warehouseName">
                <template #cell="{ record, rowIndex }">
                  {{ record.warehouseName }}
                </template>
              </a-table-column>
              <a-table-column title="仓库类型" data-index="name">
                <template #cell="{ record, rowIndex }">
                  {{ record.warehouseAttribute == 1 ? '国内仓' : '海外仓' }}
                </template>
              </a-table-column>
              <a-table-column title="SKU数量" data-index="skuTypes" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <template #cell="{ record, rowIndex }">
                  {{ record.skuTypes }}
                </template>
              </a-table-column>
              <a-table-column title="可用数量" data-index="amtAvailable" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <template #cell="{ record, rowIndex }">
                  {{ record.amtAvailable }}
                </template>
              </a-table-column>
              <a-table-column title="锁定数量" data-index="amtLocked" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <template #cell="{ record, rowIndex }">
                  {{ record.amtLocked }}
                </template>
              </a-table-column>
              <a-table-column title="次品数量" data-index="amtDefective" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <template #cell="{ record, rowIndex }">
                  {{ record.amtDefective }}
                </template>
              </a-table-column>
              <a-table-column title="总货值" data-index="inventoryValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <template #cell="{ record, rowIndex }">
                  {{ record.inventoryValue }}
                </template>
              </a-table-column>
              <a-table-column title="计划数量" data-index="amtPlan" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <template #cell="{ record, rowIndex }">
                  {{ record.amtPlan }}
                </template>
              </a-table-column>
              <a-table-column title="采购数量" data-index="amtPurchase" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <template #cell="{ record, rowIndex }">
                  {{ record.amtPurchase }}
                </template>
              </a-table-column>
              <a-table-column title="待入库数量" data-index="amtToBeIn" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <template #cell="{ record, rowIndex }">
                  {{ record.amtToBeIn }}
                </template>
              </a-table-column>
            </template>
            <template #summary-cell="{ column, record, rowIndex }">
              <div>{{ record[column.dataIndex] }}</div>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <!-- <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div> -->
    </div>
  </div>
  <!-- <Detail :detail="detail" ref="modelEl" @save="searchByVal" :shopMarkList="shopMarkList" /> -->
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, toRefs } from 'vue'
  import TableWrap from '@/components/TableWrap.vue'
  import FilterTable from '@/components/TableFilter.vue'
  import { findWarehouseListByParam } from '@/api/warehouse'
  import { listInventorySumByWarehouse } from '@/api/inventory'
  import _ from 'lodash-es'
  export default defineComponent({
    components: {
      TableWrap,
      FilterTable,
    },
    setup() {
      const data: any = reactive({
        searchValue: {
          sortField: '',
          sortType: '',
        },
        loading: false,
        tableList: [],
        shopMarkList: [],
        detail: { type: '', data: {} },
        filterItem: [
          {
            key: 'warehouseCodes',
            label: '仓库名称',
            value: ref(),
            type: 'select_multiple',
            width: 180,
            optionItems: [],
          },
          {
            key: 'replenishPoint',
            label: '仓库类型',
            value: ref(),
            type: 'select',
            width: 140,
            optionItems: [
              { label: '仓库类型', value: '' },
              { label: '国内仓', value: '1' },
              { label: '海外仓', value: '2' },
            ],
          },
        ],
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
        },
        rowSelectList: [],
      })

      const summary = (data: any) => {
        let obj: any = {
          skuTypes: 0,
          amtAvailable: 0,
          amtLocked: 0,
          amtDefective: 0,
          inventoryValue: 0,
          amtPlan: 0,
          amtPurchase: 0,
          amtToBeIn: 0,
        }

        data.data.forEach((e: any) => {
          obj.skuTypes += e.skuTypes
          obj.amtAvailable += e.amtAvailable
          obj.amtLocked += e.amtLocked
          obj.amtDefective += e.amtDefective
          obj.inventoryValue += e.inventoryValue
          obj.amtPurchase += e.amtPurchase
          obj.amtPlan += e.amtPlan
          obj.amtToBeIn += e.amtToBeIn
        })
        for (const key in obj) {
          if (key == 'inventoryValue') obj[key] = obj[key].toFixed(4)
        }
        return [
          {
            name: '合计',
            ...obj,
          },
        ]
      }

      const searchByVal = (info: any) => {
        let obj = _.cloneDeep(info)
        data.searchValue = {}
        data.searchValue = Object.assign(data.searchValue, obj)
        data.pageNation.pageNum = 1
        getList()
      }

      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getList()
      }

      const sortChange = (item: any, extra: any) => {
        if (extra == 'ascend') {
          data.tableList.sort((a: any, b: any) => {
            let val1 = a[item]
            let val2 = b[item]
            return val1 - val2
          })
        } else if (extra == 'descend') {
          data.tableList.sort((b: any, a: any) => {
            let val1 = a[item]
            let val2 = b[item]
            return val2 - val1
          })
        }

        // if (extra) {
        //   data.searchValue.sortField = item
        //   data.searchValue.sortType = extra == 'ascend' ? '1' : '-1'
        // } else {
        //   data.searchValue.sortField = ''
        //   data.searchValue.sortType = ''
        // }
        // getList()
      }

      const selectColumn = (val: any) => {
        data.rowSelectList = val
      }

      const getList = async () => {
        let params = {
          ...data.searchValue,
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
        }
        data.loading = true
        const res: any = await listInventorySumByWarehouse(params)
        if (res.code == 'SUCCESS') {
          data.tableList = res.data
          // data.pageNation.total = res.data.total
        }
        data.loading = false
      }

      const getWareHouseList = async () => {
        const res = await findWarehouseListByParam()
        let arr = res?.data
        arr.map((e: any) => {
          e.label = e.warehouseName
          e.value = e.warehouseCode
        })
        data.filterItem[0].optionItems = arr
      }

      getWareHouseList()
      getList()
      return {
        ...(toRefs(data) as any),
        getList,
        searchByVal,
        changePage,
        sizeChange,
        sortChange,
        summary,
        selectColumn,
      }
    },
  })
</script>

<style lang="less" scoped>
  .warehoust-con {
    width: 100%;
    height: calc(100vh - @menuAndTabHeight);

    .flag {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      text-align: center;
      line-height: 20px;
      color: red;
    }
    .search-con {
      // display: flex;
      overflow: hidden;
      background-color: white;
      // padding: 0 10px;
      box-sizing: border-box;
    }
  }
</style>
